<template>
  <div class="visible-column">
    <q-btn class="filter-btn margin-l-10"
           flat
           color="primary"
           icon="iconfont icontubiao-35">
      <q-icon class="icon-sanjiao"
              name="iconfont icontubiao-40" />
      <q-menu anchor="bottom right"
              self="top right" content-class="overflow-hidden-x">
        <q-list dense :style="{'width': menuWidth}">
          <template v-for="column in columns">
            <q-item v-if="!notUncheckableColumns.includes(column.name)"
                    :key="column.name"
                    clickable
                    tag="label">
              <q-item-section>
                <q-checkbox v-model="visible"
                            :val="column.name"
                            :label="column.label"
                            :disable="visible.includes(column.name) &&
                    visible.length <= notUncheckableColumns.length + 1" />
              </q-item-section>
            </q-item>
          </template>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script>
export default {
  name: 'visible-column',
  props: {
    columns: {
      type: Array
    },
    menuWidth: {
      default: 'auto'
    },
    notUncheckableColumns: [Array],
    value: [Array, String]
  },
  data () {
    return {
      visible: []
    }
  },
  watch: {
    value: {
      handler (val) {
        this.visible = val
      },
      deep: true,
      immediate: true
    },
    visible: {
      deep: true,
      handler () {
        this.$emit('input', this.visible)
      }
    }
  },
  computed: {
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style scoped lang="stylus"></style>
